<template>
  <div class="container" :style="{ backgroundImage: `url(${bg})` }">
    <nav-bar
      bgColor="#fff"
      title="关注公众号"
    ></nav-bar>
    <u-loading-page :loading="!qrCode"> </u-loading-page>
    <view class="qrCode-container">
      <div class="title">关注公众号</div>
      <div class="line"></div>
      <image show-menu-by-longpress :src="qrCode" lazy-load class="qrCode" />
      <view class="follow"> 长按识别二维码，关注公众号 </view>
    </view>
  </div>
</template>

<script>
import { genSubscribeQrcode,getQrcode } from "@/service/api/sp-common";
import { mapState } from "vuex";

export default {
  name: "index",
  data() {
    return {
      qrCode: "",
      bg: "https://hyyxboss.oss-cn-shenzhen.aliyuncs.com/business/3384/20230403/270a7038-8dc4-4723-9380-88a77aea9106.png",
      timer:''
    };
  },
  computed: {
    loading({ qrCode }) {
      return !qrCode;
    },
    ...mapState("sp-common/auth", ["pubUserInfo"]),
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
  },
  created() {
    this.fetchData();
    this.timer = setInterval(()=>{
      this.fetchData()
    },170000) //二维码过期时间是3min   前端控制在2min50s
  },
  methods: {
    async fetchData() {
      let {id:userId} = this.pubUserInfo
      await getQrcode({userId}).then(res=>{
        const { qrcodeUrl } = res;
        this.qrCode = qrcodeUrl;
      }).catch(err=>{
        let {msg,code} = err
        err.msg = code == 400001?'当前账号已绑定其他微信，请登录PC后台进行解绑后重新绑定':msg
        uni.showModal({
          content:err.msg,
          showCancel:false,
          confirmText:'我知道了',
          confirmColor:this.themeColor,
          success:()=>{
            this.$myTool.jumpPage('back')
          }
        })
      })
    },
  },
  beforeDestroy(){
    clearInterval(this.timer)
    const pages = getCurrentPages();
		const prePage = pages[pages.length - 2] //上一个页面
		prePage.$vm.innitMaskGuideConfig()
  }
};
</script>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}
.center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.qrCode-container {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  .title {
    @extend .center;
    top: 250rpx;
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 800;
    color: #131313;
  }
  .line {
    @extend .center;
    top: 338rpx;
    width: 84rpx;
    height: 10rpx;
    background: #f0eeea;
    border-radius: 2rpx;
  }
  .qrCode {
    @extend .center;
    top: 374rpx;
    margin: 0 auto;
    width: 308rpx;
    height: 308rpx;
  }
  .follow {
    @extend .center;
    top: 779rpx;
    width: 100%;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #131313;
  }
}
</style>
